﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Topro</title>
    <script src="/js/header.min.js"></script>
    <script src="/js/largeScreen.js?/js/base.js=1"></script>
    <script src="/lib/highcharts/highcharts.js"></script>
    <script src="/lib/date/wdatepicker.js"></script>
    <style>
        html,body{margin:0;padding:0;}
        #main {
            float: left;
            width: 80%;
            height: 100%;
        }
        #column {
            float: left;
            height: 100%;
            width: 20%;
        }
        #time {
            height: 880px;
        }
        #target {
            height: 300px;
        }
        .menu{position:fixed;right:0px;top:45%;}
        .menu dl dd{position:relative;width:80px;height:30px;line-height:30px;background-color:#646577;border-bottom:solid 1px #555666;text-align:center;background-repeat:no-repeat;background-position:center 20%;cursor:pointer;color:#FFFFFF;}
        .menu dl dd a {display:block;color:#ffffff;}
        .menu dl dd:hover {display:block;color:#ffffff;}
        .container-fluid {padding-right: 0px;padding-left: 0px;margin-right: auto;margin-left: auto;}
        .circle{
            width: 100px;
            height: 50px;
        }
        #list div{ height:30px; line-height:30px; padding:5px; margin-left:10px;}
        #list .title{font-size:25px;font-weight:bold}
        .running{ background-color:#87D300}
        .setup{background-color:#33B56B}
        .bookblock{background-color:#D02434}
        .waitingplaten{background-color:#7A834E}
        .spchanging{background-color:#31341F}
        .copperfoilchanging{background-color:#8A7644}
        .ppchanging{background-color:#383222}
        .idle{background-color:#33B56B}
        .malfunction{background-color:#D02434}
        .shiftservice{background-color:#4ADE86}
        .weeklyservice{background-color:#009531}
        .nowip{background-color:#51B2C5}
        .qualityblok{background-color:#072348}
        .planlinedown{background-color:#17527A}
        .machinemaintenance{background-color:#F2AA31}
    </style>
</head>
<body style="background-color: #000000;">
<section class="container-fluid">
    <div class="data-wrap case" style="background-color:#bdbdbd">
        <div class="data-tool clearfix">
            <div class="pull-left form-inline t_c" style="font-size:25px;font-weight:bold">
                <label style="margin-left:10px">AT&S 101 OEE</label>
            </div>
            <div class="pull-right">
                <form class="form-inline" id="formSearch">
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon m5_l" style="background-color:#bdbdbd;color:#FFFFFF">时间：</label>
                        <input id="d421" class="Wdate wd110 wd1" name="startTime" type="text" value="@(ViewBag.StartTime)" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d'})" autocomplete="off" />
                        -
                        <input id="d422" class="Wdate wd110 m5_l" name="endTime" type="text" value="@(ViewBag.EndTime)" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'d421\')}'})" autocomplete="off" />
                    </div>
                    <button type="button" class="btn btn-default btn-sm active" id="btnSearch"><span class="glyphicon glyphicon-search"></span> 搜索</button>
                    <button type="button" class="btn btn-default btn-sm active" id="btnData"> 生产线数据</button>
                </form>
            </div>
        </div>
        <div class="data-wrap">
            <div id="main">
                <div id="time"></div>
            </div>
            <div id="column">
                 <div id="data">
                     <div id="list">
                        <div class="title">24</div>
                        <div><span class="circle working">Working</span> 12.5小时</div>
                        <div><span class="circle ready">Ready</span> 12.5小时</div>
                        <div><span class="circle idle">Idle</span> 12.5小时</div>
                        <div><span class="circle exception">Error</span> 12.5小时</div>
                        <div><span class="circle service">Service</span> 12.5小时</div>
                     </div>
                 </div>
            </div>
        </div>
        @*<div id="chart"></div>*@
    </div>
</section>
<script type="text/x-dot-template" id="tpl">
    <div id="list">
    {{? it && it.length>0}}
        {{ for(var prop in it) { }}
            {{?it[prop]['id']==0}}
                <div class="title">{{=it[prop]['day']}}</div>
            {{??}}
                <div><span class="circle {{=it[prop]['styeName']}}">{{=it[prop]['name']}}</span> {{=it[prop]['time']}}小时</div>
            {{?}}
        {{ } }}
    {{?}}
    </div>
</script>
</body>
</html>
